import React from "react";
import { MailOutlined } from "@ant-design/icons";
import type { ProColumns } from "@ant-design/pro-components";
import { ProTable } from "@ant-design/pro-components";
import { Card, Descriptions, Menu } from "antd";
import { useState } from "react";

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

export type TableListItem = {
  key: number;
  name: string;
  createdAt: number;
  progress: number;
};
const tableListDataSource: TableListItem[] = [];

for (let i = 0; i < 2; i += 1) {
  tableListDataSource.push({
    key: i,
    name: `TradeCode ${i}`,
    createdAt: Date.now() - Math.floor(Math.random() * 2000),
    progress: Math.ceil(Math.random() * 100) + 1
  });
}

const columns: ProColumns<TableListItem>[] = [
  {
    title: "序号",
    dataIndex: "index",
    valueType: "index",
    width: 80
  },
  {
    title: "更新时间",
    key: "since2",
    dataIndex: "createdAt",
    valueType: "date"
  },
  {
    title: "执行进度",
    dataIndex: "progress",
    valueType: "progress"
  }
];

export default () => {
  const [key, setKey] = useState("1");

  return (
    <ProTable<TableListItem>
      columns={columns}
      rowKey="key"
      pagination={{
        showSizeChanger: true
      }}
      tableRender={(_, dom) => (
        <div
          style={{
            display: "flex",
            width: "100%"
          }}
        >
          <Menu
            onSelect={(e) => setKey(e.key as string)}
            style={{ width: 256 }}
            defaultSelectedKeys={["1"]}
            defaultOpenKeys={["sub1"]}
            mode="inline"
          >
            <Menu.SubMenu
              key="sub1"
              title={
                <span>
                  <MailOutlined />
                  <span>Navigation One</span>
                </span>
              }
            >
              <Menu.ItemGroup key="g1" title="Item 1">
                <Menu.Item key="1">Option 1</Menu.Item>
                <Menu.Item key="2">Option 2</Menu.Item>
              </Menu.ItemGroup>
              <Menu.ItemGroup key="g2" title="Item 2">
                <Menu.Item key="3">Option 3</Menu.Item>
                <Menu.Item key="4">Option 4</Menu.Item>
              </Menu.ItemGroup>
            </Menu.SubMenu>
          </Menu>
          <div
            style={{
              flex: 1
            }}
          >
            {dom}
          </div>
        </div>
      )}
      params={{
        key
      }}
      request={async () => {
        await waitTime(200);
        return {
          success: true,
          data: tableListDataSource
        };
      }}
      dateFormatter="string"
      headerTitle="自定义表格主体"
    />
  );
};
